<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D变换</title>
</head>
<style>
    div:nth-of-type(1){
        width: 100px;
        height: 100px;
        border: 1px solid #f00;
        box-sizing: border-box;
        transform: translate(200px,100px) rotate(45deg) scale(2) ;
    }   
    div:nth-of-type(2){
        width: 100px;
        height: 100px;
        border: 1px solid #f00;
        box-sizing: border-box;
        transform: translate(10px,10px) scale(2);
    }
    div:nth-of-type(3){
        width: 100px;
        height: 100px;
        background: #f00;
        transition: all 1s ease;
    }
    div:nth-of-type(3):hover{
        width: 800px;
        transition: all 1s ease-out;
    }
</style>
<body>
    <div id='test'></div>
    <div></div>
    <div></div>
</body>
</html>